<template>
  <el-table :data="props.list" :show-header="false">
    <el-table-column label="配置名称" prop="configName" width="230">
      <template #default="scope">
        <span>{{ scope.row.configName }}&nbsp;</span>
        <el-tooltip :content="scope.row.configKey" placement="right-start" effect="light">
          <el-icon>
            <InfoFilled />
          </el-icon>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column label="参数">
      <template #default="scope">
        <span v-if="(scope.row.contentType === 1 || scope.row.contentType === 2) && scope.row.configShow">{{ scope.row.configValue }}</span>
        <el-button v-if="(scope.row.contentType === 1 || scope.row.contentType === 2) && !scope.row.configShow" link type="primary" @click="handleView(scope.row)">【查看详情】 </el-button>
        <el-image v-if="scope.row.contentType === 3" :alt="scope.row.configName" :src="scope.row.configValue" class="img" />
        <span v-if="scope.row.contentType === 4">{{ toNumber(scope.row.configValue) === 1 ? '开启' : '关闭' }}</span>
        <enum-view v-if="scope.row.configKey === 'vodPlatform'" :enum-name="'VodPlatform'" :enum-value="toNumber(scope.row.configValue)" />
        <enum-view v-if="scope.row.configKey === 'livePlatform'" :enum-name="'LivePlatform'" :enum-value="toNumber(scope.row.configValue)" />
        <enum-view v-if="scope.row.configKey === 'storagePlatform'" :enum-name="'StoragePlatform'" :enum-value="toNumber(scope.row.configValue)" />
        <enum-view v-if="scope.row.configKey === 'smsPlatform'" :enum-name="'SmsPlatform'" :enum-value="toNumber(scope.row.configValue)" />
        <enum-view v-if="scope.row.configKey === 'llmPlatform'" :enum-name="'llmPlatform'" :enum-value="toNumber(scope.row.configValue)" />
        <br />
        <span style="color: #999; font-size: 13px">{{ scope.row.remark }}</span>
      </template>
    </el-table-column>
    <el-table-column v-permission="'sys:config:edit'" label="操作" width="100">
      <template #default="scope">
        <el-switch
          v-if="scope.row.contentType === 4"
          v-model="scope.row.configValue"
          active-color="#13ce66"
          active-text="开启"
          active-value="1"
          inactive-color="#ff4949"
          inactive-text="关闭"
          inactive-value="0"
          inline-prompt
          size="large"
          @change="handleSwitch(scope.row)"
        />
        <el-button v-else link type="primary" @click="openFormModal(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <config-form ref="formRef" @refresh="handleList"></config-form>
  <form-view ref="viewRef"></form-view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import ConfigForm from './ConfigForm.vue'
  import FormView from './View.vue'
  import EnumView from '@/components/Enum/View/index.vue'
  import { systemApi } from '@/api/system.js'
  import { InfoFilled } from '@element-plus/icons-vue'
  import { toNumber } from '@/utils/base.js'

  const props = defineProps({
    list: { type: Array, default: null }
  })

  onMounted(async () => {})

  // 刷新
  const emit = defineEmits(['refresh'])
  const handleList = () => {
    emit('refresh')
  }

  // 查看
  const viewRef = ref()
  const handleView = (item) => {
    viewRef.value.onOpen(item)
  }

  // 切换开关
  const handleSwitch = (row) => {
    const formModel = {
      id: row.id,
      configKey: row.configKey,
      configValue: row.configValue
    }
    systemApi.sysConfigEdit(formModel)
  }

  // 添加/修改
  const formRef = ref()
  const openFormModal = (item) => {
    formRef.value.onOpen(item)
  }
</script>
<style lang="scss" scoped>
  .img {
    height: 50px;
    width: auto;
  }

  .remark {
    color: #999;
    font-size: 13px;
  }
</style>
